<template>

  <van-cell :title="`已选：${selectedOption},${sizeOption}`" is-link @click="showBottom = true" />
  <!-- 底部弹出 -->
<van-popup
  v-model:show="showBottom"
  position="bottom" 
  :style="{ height: '30%' }"
   closeable
>
<!--图片加载-->
<van-row gutter="10">
  <van-col span="6">
    <img src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" alt="" width="100%" height="100%">
  </van-col>
  <van-col span="18" >
    <div style="margin-top: 35px; color: red;">￥<strong style="font-size: 20px;">5999</strong>.00</div>
    <div>已选：{{selectedOption}},{{ sizeOption }},{{ count }}个</div>
  </van-col>
 
</van-row>
 <!-- 单选按钮组 -->
    <!-- <van-radio-group v-model="selectedOption">
      <div style="padding: 16px" v-for="item in selectList">
        <van-radio :name="item">{{item}}</van-radio>
      </div>
    </van-radio-group> -->

     <!-- 使用单元格列表代替单选按钮 -->
    <!-- <van-cell-group>
      <van-cell 
        v-for="item in selectList"
        :key="item"
        :title="item"
        clickable
        @click="selectedOption = item"
        :class="{ 'selected-item': selectedOption === item }"
      > -->

        <!-- 右侧图标：选中时显示勾选图标 -->
        <!-- <template #right-icon>
          <van-icon 
            v-if="selectedOption === item" 
            name="success" 
            color="#07c160" 
            size="20"
          />
        </template> -->
      <!-- </van-cell> -->
    <!-- </van-cell-group> -->
    <!--单选按钮-->
<div>颜色：</div>
 <div class="horizontal-options">
  
      <div 
        v-for="item in selectList"
        :key="item"
        class="option-item"
        :class="{ 'selected': selectedOption === item }"
        @click="selectedOption = item"
      >
        {{ item }}
      </div>
    </div>
    <div>尺寸：</div>
 <div class="horizontal-options">
  
      <div 
        v-for="item in sizeList"
        :key="item"
        class="option-item"
        :class="{ 'selected': sizeOption === item }"
        @click="sizeOption = item"
      >
        {{ item }}
      </div>
    </div>
  <div style="margin-top: 10px;">
    数量：  <van-stepper v-model="count" label-align/>
  </div>
</van-popup>

<van-cell :title="`${selectedOption},${sizeOption}`" is-link @click="showfw = true" icon="location-o" />
<van-popup
  v-model:show="showfw"
  position="bottom" 
  :style="{ height: '30%' }"
   closeable
>
<van-cell title="单元格"  label="描述信息" icon="location-o" />
</van-popup>

</template>
<script setup>

import {ref} from 'vue'
const showfw = ref(false)
const showBottom  =ref(false)

const selectList=ref(['选项一','选项二','选项三'])
const selectedOption=ref(selectList.value[0])
const sizeList =ref(['S','X','XL','XXL'])
const sizeOption = ref(sizeList.value[0])

const count = ref(1)
</script>
<style scoped>
/* 增加单元格内边距 */
/* .van-cell {
  padding: 16px;
} */

/* 选中项文字加粗 */
/* .van-cell__title span {
  font-weight: var(--van-font-bold);
} */
/* 选中项样式 */
/* .selected-item {
  color: red; 文本变红
  border: 2px solid red; 添加红色边框
  border-radius: 8px; 圆角边框
  margin: 8px; 添加外边距
} */




/* 横向选项容器 */
.horizontal-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 10px;
  gap: 5px; /* 选项间距 */

}

/* 选项样式 */
.option-item {
  padding: 8px 15px;
  border: 1px solid #ebedf0;
  border-radius: 8px;
  background-color: #f7f8fa;
  font-size: 14px;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  min-width: 80px;
  box-sizing: border-box;
}
/* 选中状态样式 */
.option-item.selected {
  color: red;
  border: 2px solid red;
  background-color: #fff;
  font-weight: bold;
  transform: scale(1.05);
  box-shadow: 0 2px 6px rgba(255, 0, 0, 0.2);
}

.van-stepper{
  float: right;
}

/* 调整弹出框内边距 */
.van-popup {
  padding: 20px 10px;
}
</style>
